<template>
  <el-col :sm="12" :lg="6" v-if="this.legal === false" class="error">
    <el-result icon="error" title="错误提示" subTitle="无编辑权限">
    </el-result>
  </el-col>
  <div id="edit" v-else>
    <topnav :questionnaireId="questionnaireId" @leave="leave"></topnav>
    <left-choose @addQuestion="addQuestion"></left-choose>
    <qa-set :isDate="isDate" :begin="begin" :end="end" :isAutoLabel="isAutoLabel" :randomType="randomType" :isAutoSubmit="isAutoSubmit"
            @changeDate="changeDate" @changeBegin="changeBegin" @changeEnd="changeEnd" @changeLabel="changeLabel" @changeSubmit="changeSubmit" @changeRandom="changeRandom"
    ></qa-set>
    <right-create ref="right"
                  :questionnaireId="questionnaireId"
                  @initDate="initDate" @initBegin="initBegin" @initEnd="initEnd" @initLabel="initLabel" @initSubmit="initSubmit" @initRandom="initRandom" @changeState="changeState"
    ></right-create>
    <el-backtop :right="2"></el-backtop>
  </div>

</template>

<script>
import Topnav from './Topnav'
import LeftChoose from './LeftChoose'
import RightCreate from './RightCreate'
import QaSet from './QaSet'
export default {
  name:'Edit',
  components: {
    Topnav,
    LeftChoose,
    RightCreate,
    QaSet,
  },
  data(){
    return {
      isAutoLabel: true,
      randomType: '',
      isAutoSubmit: false,
      begin: null,
      end: null,
      legal: true,
      isDate: false,
    }
  },
  computed:{
    questionnaireId(){
      return parseInt(this.$route.query.questionnaireId)
    }
  },
  methods: {
    addQuestion(type) {
      this.$refs.right.addQuestion(type)
    },
    changeDate(isDate) {
      this.isDate = isDate
      this.$refs.right.isDate = isDate
      this.$refs.right.apiEditQuestionnaire()
    },
    initDate(isDate) {
      this.isDate = isDate
      this.$refs.right.isDate = isDate
    },
    changeLabel(isAutoLabel) {
      this.isAutoLabel = isAutoLabel
      this.$refs.right.isAutoLabel = isAutoLabel
      this.$refs.right.apiEditQuestionnaire()
    },
    initLabel(isAutoLabel) {
      this.isAutoLabel = isAutoLabel
      this.$refs.right.isAutoLabel = isAutoLabel
    },
    changeSubmit(isAutoSubmit) {
      this.isAutoSubmit = isAutoSubmit
      this.$refs.right.isAutoSubmit = isAutoSubmit
      this.$refs.right.apiEditQuestionnaire()
    },
    initSubmit(isAutoSubmit) {
      this.isAutoSubmit = isAutoSubmit
      this.$refs.right.isAutoSubmit = isAutoSubmit
    },
    changeRandom(randomType) {
      this.randomType = randomType
      if(randomType) {
        this.$refs.right.randomType = 'random'
      }else {
        this.$refs.right.randomType = ''
      }

      this.$refs.right.apiEditQuestionnaire()
    },
    initRandom(randomType) {
      if(randomType === '' || randomType==null){
        this.randomType = false
        this.$refs.right.randomType = randomType
      }
    },
    changeBegin(begin) {
      this.begin = begin
      this.$refs.right.begin = begin
      this.$refs.right.apiEditQuestionnaire()
    },
    initBegin(begin) {
      this.begin = begin
      this.$refs.right.begin = begin
    },
    changeEnd(end) {
      this.end = end
      this.$refs.right.end = end
      this.$refs.right.apiEditQuestionnaire()
    },
    initEnd(end) {
      this.end = end
      this.$refs.right.end = end
    },
    changeState() {
      this.legal = false
    },
    leave() {
      this.$refs.right.apileave()  
    }
  }
}

</script>

<style scoped>
  @import url('~assets/css/base.css');

  .edit {
    height: 100%;
  }

  body, html{
    height: 100%;
  }

  .error {
    margin-left: 50%;
    transform: translateX(-50%);
  }
</style>
